<script setup lang="ts">
import Cookies from 'js-Cookie'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { CheckReleaseDistrict } from '../../http/api'
import phoneFlag from '../../hooks/changePhoneFlag'
const id = ref("")
const user_type = ref("")
const city_id = ref("")

const phoneflag = phoneFlag(800)
const flag = ref<boolean>(false)
const router = useRouter()
onMounted(async () => {
    loading.value = true
    id.value = Cookies.get("user_id") as string
    user_type.value = Cookies.get("user_type") as string
    city_id.value = Cookies.get("city_id") as string
    flag.value = await CheckReleaseDistrict()
    loading.value = false
})
const dialogVisible = ref(true)

const loading = ref(true)
const linkTo = (name: { path: string }) => {
    router.push(name)
}
</script>

<template>
    <el-dialog v-model="dialogVisible" title="广大青心·问卷填写" :width="phoneflag ? '80%' : '30%'" :show-close="false"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <el-skeleton style="width: 100%" :loading="loading" animated>
            <template #template>

                <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
                    <el-skeleton-item variant="h3" style="width: 80%;margin-bottom: 20px;" />
                    <el-skeleton-item variant="h3" style="width: 50%;margin:5px" />
                    <el-skeleton-item variant="h3" style="width: 40%;margin:5px" />
                    <el-skeleton-item variant="h3" style="width: 30%;margin:5px" />
                </div>
            </template>
            <template #default>
                <div style="display:flex;flex-direction:column;align-items: center;">
                    <span style="margin-bottom:30px;font-size:20px">您的登录账号为:<span style="color:red">{{ id
                    }}</span>,请记住您的账号以便下次登录</span>
                    <el-button style="width:250px" v-if="user_type === '2' && flag === true && city_id === '11'"
                        @click="linkTo({ path: '/questionnaire/13' })">
                        点击链接进入学生测评</el-button>
                    <el-button style="width:250px" v-else-if="user_type === '2' && flag === true && city_id !== '11'"
                        @click="linkTo({ path: '/questionnaire/13' })">
                        点击链接进入学生测评</el-button>
                    <el-button style="width:250px" v-else-if="user_type === '1' && flag === true"
                        @click="linkTo({ path: '/questionnaire/1' })">
                        进入学校心理健康教育工作测评</el-button>

                    <el-button style="width:250px" v-else>问卷测评暂未开放</el-button>
                    <el-button style="width: 200px;margin:10px 0 0 0 " @click="linkTo({ path: '/index' })">回到首页
                    </el-button>
                    <el-button style="width: 150px;margin:10px 0 0 0 " @click="linkTo({ path: '/home/user' })">个人中心
                    </el-button>
                </div>
            </template>

        </el-skeleton>


        <template #footer>
            <span class="dialog-footer">

            </span>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped></style>